<template>
  <div>
    <div class="search-lists clearfix" v-if="configs.length>0">
      <component
        class="search-lists-item"
        v-for="(item,index) in configs"
        :key="index"
        :is="item.component"
        :desc="item"
        @output="callbackFn"
      ></component>
    </div>
    <div class="search-show">
      <el-row>
        <span class="round primary" v-for="(item ,index) in getState" :key="item.key">
          {{item.key+':' +item.value}}
          <a
            href="javascript:;"
            title="删除"
            class="close-btn"
            @click="delteFn(index)"
          >x</a>
        </span>
      </el-row>
    </div>
    <div class="list">
      <!-- <search-engine-tabs-list :listData="dataList"/> -->
      <component :is="state+'List'" :listData="dataList" />
    </div>
  </div>
</template>
<script>
import popInput from '@/components/popInput';
import popRange from '@/components/popRange';
import dropdown from '@/components/dropdown';
import searchEngineTabsList from './list';
import caseList from './list/caseList';
import policeList from './list/policeList';
import keyPersonList from './list/keyPersonList';
import offenManList from './list/offenManList';
import leaveManList from './list/leaveManList';
import { mapActions, mapGetters } from 'vuex';
export default {
  name: 'tabConfig',
  components: {
    popInput,
    popRange,
    dropdown,
    searchEngineTabsList,
    caseList,
    policeList,
    keyPersonList,
    offenManList,
    leaveManList
  },
  props: ['configs', 'state', 'tabIndex'],
  data() {
    return {
      dataList: []
    };
  },
  computed: {
    getState: function () {

      let _params;
      switch (this.state) {
        case 'case':
          console.log('time get ');
          console.log(this.tabIndex);
          _params = this.$store.state['searchEngine'].case;
          this.getSearchEngineCaseList(_params);
          return _params;
          break;
        case 'police':
          _params = this.$store.state['searchEngine'].police;
          this.getHttp(_params);
          return _params;
          break;
        case 'keyPerson':
          _params = this.$store.state['searchEngine'].keyPerson;
          this.getHttp(_params);
          return _params;
          break;
        case 'offenMan':
          _params = this.$store.state['searchEngine'].offenMan;
          this.getSearchEngineOffenManList(_params);
          return _params;
          break;
        case 'leaveMan':
          _params = this.$store.state['searchEngine'].leaveMan;
          this.getHttp(_params);
          return _params;
          break;
        default: break;
      }
    }
  },
  methods: {
    ...mapActions('searchEngine', ['setItem', 'removeItem']),
    callbackFn(data) {
      this.setItem({ item: data, type: this.state });
    },
    delteFn(index) {
      this.removeItem({ index: index, type: this.state })
    },
    getHttp(){},
    async getSearchEngineCaseList(){
      const res = await this.$services.get({
        type:'SEARCHENGINE',
        url:'getSearchEngineCaseList'
      });
      console.log(typeof res);
      console.log(res);
      this.dataList = res.bean.list;
      this.total = res.bean.total; 
      this.$emit('setTotal', { index: this.tabIndex, val: this.total });
    },
    async getSearchEngineOffenManList(){
      const res = await this.$services.get({
        type:'SEARCHENGINE',
        url:'getSearchEngineOffenManList'
      });
      console.log(typeof res);
      console.log(res);
      this.dataList = res.bean.list;
      this.total = res.bean.total; 
      this.$emit('setTotal', { index: this.tabIndex, val: this.total });
    },
  }
};
</script>
<style lang="scss" scoped>
.mr15 {
  margin-left: 15px;
}
.search-lists {
  .search-lists-item {
    float: left;
    margin-left: 10px;
  }
}
.search-show {
  margin-top: 20px;
  padding: 5px;
  background: #fff;
  border: 1px solid #333;
  min-height: 40px;
  .round {
    border: 1px solid #409eff;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 12px;
    margin-right: 8px;
  }
  .primary {
    color: #fff;
    background: #409eff;
  }
  .close-btn {
    color: red;
    display: inline-block;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: red;
  }
}
</style>
